<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>团购活动详细页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <style type="text/css">
        .am-with-topbar-fixed-bottom{padding-bottom: 70px;}
        div.container{border-bottom:none;}
        .kuaikuai-product{padding: 15px 0; display: flex;width: 100%;height: 100%;border-bottom: 1px solid #d2d2d2;}
        .price{text-align: center;}
        .price p, .container-inner p, .container-inner h3{margin: 0 !important;}
        .price p.am-text-lg{color: #d90f0f;}
        .til{display: block;width: 100%;height: 100%;padding: 10px 15px;}
        .til p{color: #666666; margin: 0;}
        .green{color: #31cc31 !important;}

        .container-inner{padding: 15px;background-color: #fff;}
        .container-inner p.am-text-xs{color: #808080;}

        .dd .item{float: left; margin: 2px 8px 2px 0;border: 1px solid #d2d2d2; padding: 8px 5px}
        .dd .item a{display: block; float: left;color: #000000}
        .item.selected{border-color: #d90f0f;position: relative;zoom: 1;}
        .item.selected b{position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; overflow: hidden;  background: url("../assets/i/icon/right.png"); }
    </style>
</head>
<body class="am-with-topbar-fixed-bottom">
<div class="container">
    <!-- 图片轮播 -->
    <div class="am-slider am-slider-a1">
        <ul class="am-slides">
            <li><img src="../assets/i/examples/slider2.png"></li>
            <li><img src="../assets/i/examples/slider2.png"></li>
            <li><img src="../assets/i/examples/slider2.png"></li>
            <li><img src="../assets/i/examples/slider2.png"></li>
        </ul>
    </div>

    <section class="kuaikuai-product">
        <h3 class="am-text-sm am-u-sm-9" style="border-right: 1px solid #d2d2d2;margin-bottom: 0px;">精洗费时价高不够亮，快快省时价低还打蜡。</h3>
        <div class="am-u-sm-3 price">
            <p class="am-text-lg">480元</p>
            <p><s>680元</s></p>
        </div>
    </section>
</div>

<div class="til">
    <p class="am-text-xs">快快打蜡洗车推出超值优惠套餐活动，本套餐仅需480元就可以拥有十张快快极致打蜡洗车券。</p>
    <p class="am-text-xs green" style="margin-top: 5px;">团购套餐可在快快车生活微信公众号中下单使用！</p>
</div>

<div class="container">
    <div class="container-inner">
        <h3 class="am-text-sm " style="padding-bottom: 5px;">购买须知</h3>
        <p class="am-text-xs green">使用范围：</p>
        <p class="am-text-xs">团购券类可以在快快极致打蜡洗车全部服务店面。</p>
        <p class="am-text-xs green">有效期：</p>
        <p class="am-text-xs">2014.8.1至 2016.1.1</p>
        <p class="am-text-xs green">使用规则：</p>
        <p class="am-text-xs">1.无需预约，随时可以去快快洗车店进行消费；</p>
        <p class="am-text-xs">2.不可找零，不兑现；</p>
        <p class="am-text-xs">3.暂时不可转给他人使用；</p>
        <p class="am-text-xs">4.只可以在有效期内使用；</p>
    </div>
</div>

<div class="cart-btns-fixed" style="display: table;">
    <div class="cart-btns-fixed-box">
        <div class="dd">
            <div class="item selected"><b></b><a href="#none" title="5座以下">5座以下</a></div>
            <div class="item "><b></b><a href="#none" title="5座以上">5座以上</a></div>
        </div>
        <button type="button" class="am-btn am-btn-danger am-radius ">立即购买</button>
    </div>
</div>
<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('.am-slider').flexslider({
            // options
            slideshowSpeed: 3000
        });

        $('.cart-btns-fixed-box button').on('click', function() {
            window.location.href = 'orderInfo.html';
        });

        var dds = $('.dd .item');
        for (var i = 0; i < $('.dd .item').length; i++) {
            $(dds[i]).on('click', function () {
                $('.dd .item').removeClass('selected');
                $(this).addClass('selected');
            });
        }
    });
</script>
</body>
</html>